<template>
    <div class="m-content">
        <!--标题-->
        <h3 v-if="user.username">欢迎来到{{user.username}}的博客</h3>
        <h3 v-if="!user.username">
            <el-link type="primary" href="/login">请先登录</el-link>
        </h3>
        <!--头像-->
        <div class="block">
            <el-avatar :size="50" :src="user.avatar"></el-avatar>
        </div>

        <!--分割线-->
        <div class="m-action">
            <span><el-link type="primary" href="/blog/blogs">主页</el-link></span>
            <el-divider direction="vertical"></el-divider>

            <span><el-link type="success" href="/blog/add">发表博客</el-link></span>
            <el-divider direction="vertical"></el-divider>

            <span><el-link type="danger" @click="logout">退出</el-link></span>
            <el-divider direction="vertical"></el-divider>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                user: {
                    username: '',
                    avatar: '',
                }
            };

        },
        methods: {
            // 退出， localStorage 清除
            logout() {
                const _this = this;
                _this.$axios.get("/logout", {
                    // localStorage 清除
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                }).then(res => {
                    // 清除全局的state
                    _this.$store.commit("REMOVE_INFO")
                    // 退出登录后跳转到login页面
                    _this.$router.push("/login")
                })
            },

        },

        // 页面加载时，初始化
        created() {
            if (this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username;
                this.user.avatar = this.$store.getters.getUser.avatar
            }
        },

        components: {},

        computed: {},
    }
</script>

<style lang="less" scoped>
    .m-content {
        /*居中*/
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
    }

    .m-action {
        margin: 10px 0;
    }

</style>
